<template>
  <div class="center">
    <div class="top">
      <div>
        <span>当月产量（辆）</span>
        <br />
        <span class="sp1">56200</span>
      </div>
      <div>
        <span>今日上线（辆）</span>
        <br />
        <span class="sp1">200</span>
      </div>
      <div>
        <span>今日入库（辆）</span>
        <br />
        <span class="sp1">200</span>
      </div>
      <div>
        <span>今日出库（辆）</span>
        <br />
        <span class="sp1">200</span>
      </div>
    </div>
    <div class="down">
      <div class="downtop">
        <zongzhuangstatistical class="zongzhuang" />
        <tuzhuangstatistical class="tuzhuang" />
      </div>
      <div class="downmiddle">
        <span>今日生产计划达成率</span>
      </div>
      <div class="downlast">
        <hanzhuangstatistical class="hanzhuang" />
        <chongyastatistical class="chongya" />
      </div>
    </div>
  </div>
</template>
<script>
import zongzhuangstatistical from "./zongzhuangstatistical";
import tuzhuangstatistical from "./tuzhuangstatistical";
import hanzhuangstatistical from "./hanzhuangstatistical";
import chongyastatistical from "./chongyastatistical";
export default {
  components: {
    zongzhuangstatistical,
    tuzhuangstatistical,
    hanzhuangstatistical,
    chongyastatistical
  },
  name: "statistical",
  data() {
    return {};
  },
};
</script>
      <style  scoped>
.center {
  width: 100%;
  height: 100%;
}
.center .top {
  padding-top: 2.9375rem /* 15/16 */;
}
.center .top div {
  border: 1px solid #ddd;
  border-bottom-style: none;
  border-image: linear-gradient(#4a84ff, #0e1e40) 10 10;
  float: left;
  text-align: center;
  color: #fff;
  padding-left: 0.3125rem /* 5/16 */;
  margin-left: 2.25rem /* 20/16 */;
  padding-top: 2.3125rem /* 5/16 */;
  width: 20%;
  height: 5.3125rem /* 85/16 */;
  background: -webkit-linear-gradient(top, #1d2a71, #050a19);
}
.center .top div span {
  font-size: 1.125rem /* 18/16 */;
  font-weight: bold;
}
.center .top .sp1 {
  font-size: 2.1875rem /* 35/16 */
}

.center .downtop .zongzhuang {
  float: left;
  padding-left: 6.5625rem /* 105/16 */;
  width: 28.125rem /* 450/16 */;
}

.center .downtop .tuzhuang {
  float: left;
  padding-left: 1.6875rem /* 27/16 */;
  width: 24.375rem /* 390/16 */;
}

.downmiddle {
  text-align: center;
  margin-top: 88px;
}
.downmiddle span {
  font-size: 25px /* 25/16 */;
  font-weight: bold;
}

.downlast .hanzhuang {
  float: left;
  padding-left: 6.5625rem /* 105/16 */;
  width: 28.125rem /* 450/16 */;
}
.downlast .chongya{
  float: left;
  padding-left: 1.6875rem /* 27/16 */;
  width: 24.375rem /* 390/16 */;
}
</style>
      